<template>
	<view class="beijingse">
		<header-top :messageInfo="{typeFlag:true,message:'搜索',liner:false}"></header-top>
		<view class="mainpadding">
			<view class="flexbetween">
				<view class="sousuobox flexleft">
					<view class="sousuo margin_right1"></view>
					<input type="text" placeholder="请输入商品名称" v-model="ss_content">
				</view>
				<view class="huangsetext" @click="tzspss">搜索</view>
			</view>
			<view class="flexbetween margin_top2">
				<view class="huisetext">历史搜索</view>
				<view class="shanchu" @click="empty"></view>
			</view>
			<view class="flex_wrap flexleft">
				<view class="lishibox margin_right2 margin_top2" v-for="(item, index) in ss_ls" :key="index"
					@click="clickssls(item)">{{item}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ss_ls: [],
				ss_content: ""
			}
		},
		async onLoad() {
			let list = await uni.getStorage({
				key: 'searchList'
			});
			if (list[1].data) {
				this.ss_ls = JSON.parse(list[1].data);
			}
		},
		methods: {
			clickssls(item) {
				this.ss_content = item
				this.tzspss()
			},
			// 跳转商品搜索
			tzspss() {
				let _this = this
				if (_this.ss_content == '') {
					httpRequest.toast('请输入输入内容');
					return false
				} else {
					if (!_this.ss_ls.includes(_this.ss_content)) {
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					} else {
						//有搜索记录，删除之前的旧记录，将新搜索值重新push到数组首位
						let i = _this.ss_ls.indexOf(_this.ss_content);
						_this.ss_ls.splice(i, 1);
						_this.ss_ls.unshift(_this.ss_content);
						uni.setStorage({
							key: 'searchList',
							data: JSON.stringify(_this.ss_ls)
						});
					}
				}
				uni.navigateTo({
					url: '/pages/homepage/shangplb?text=' + _this.ss_content
				})
				// _this.ss_content = ""
			},
			//清空历史记录
			empty() {
				uni.showToast({
					title: '已清空'
				});
				uni.removeStorage({
					key: 'searchList'
				});

				this.ss_ls = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.lishibox {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
		background: #FFFFFF;
		padding: 10rpx 25rpx;
		border-radius: 8rpx;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #666666;
	}

	.huangsetext {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #EF8933;
	}

	.sousuobox {
		background: #F5F5F5;
		padding: 16rpx 30rpx;
		width: 80%;
		border-radius: 69rpx;
	}
</style>
